<template>
  <div id="profile">
    <div class="title">抢钱商城</div>
    <div class="login">
      <div class="login-left">
        <img src="@/assets/img/profile/avatar.svg" alt="">
      </div>
      <div class="login-center">
        <div class="login-center-top">登录/注册</div>
        <div class="login-center-bottom">
          <img src="@/assets/img/profile/phone.svg" alt="">
          <span>暂无绑定手机号</span>
        </div>
      </div>
      <div class="login-right"> > </div>
    </div>
    <div class="data">
      <div class="common">
        <div><span class="num">-999.00</span>元</div>
        <div>我的余额</div>
      </div>
      <div class="common">
        <div><span class="num">0</span>个</div>
        <div>我的优惠</div>
      </div>
      <div class="common">
        <div><span class="num">0</span>分</div>
        <div>我的余额</div>
      </div>
    </div>
    <div class="info">
      <img src="@/assets/img/profile/message.svg" alt="">
      <span>我的消息</span>
    </div>
    <div class="info">
      <img src="@/assets/img/profile/shopping.svg" alt="">
      <span>氪金商城</span>
    </div>
    <div class="info">
      <img src="@/assets/img/profile/vip.svg" alt="">
      <span>会员卡</span>
    </div>
    <div class="info special">
      <img src="@/assets/img/profile/cart.svg" alt="">
      <span>我的购物车</span>
    </div>
    <div class="info">
      <img src="@/assets/img/profile/pointer.svg" alt="">
      <span>下载购物App</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Profile"
  }
</script>

<style scoped>
  .title{
    height: 40px;
    line-height: 40px;
    background-color: #50b7c1;
    text-align: center;
    font-size: 15px;
    color: #f2f5f8;
  }
  .login{
    padding: 5px 8px 10px;
    display: flex;
    font-size: 14px;
    color: #f2f5f8;
    background-color: #50b7c1;

  }
  .login-left{
    position: relative;
    top: -4px;
    width: 50px;
    height: 50px;
    background-color: #eee;
    border-radius: 50%;
    margin-right: 8px;
  }
  .login-left img{
    height: 100%;
  }
  .login .login-center-top{
    position: relative;
    left: 4px;
  }
  .login-center-bottom img{
    position: relative;
    top: 2px;
  }
  .login-center-bottom span{
    font-size: 12px;
    font-weight: 300;
  }
  .login-right{
    position: relative;
    left: 90px;
    top: 5px;
    font-size: 20px;

  }
  .info img,.login-center-bottom img{
    width: 18px;
    height: 18px;
  }
  .data{
    display: flex;
    padding: 20px 8px;
    border-bottom: 8px solid rgb(247,247,247);
  }
  .data .common{
    flex: 1;
    font-size: 13px;
    text-align: center;
    border-right: 1px solid rgb(238,238,238);
  }
  .common div:nth-child(1) span{
    font-size: 20px;
    line-height: 30px;
    font-weight: 550;
    color: #ff5777;
  }
  .info{
    padding: 8px 17px;
    font-size: 13px;
    border-top: 1px solid rgb(238, 238, 238);
  }
  .info img{
    position: relative;
    top: 4px;
    margin-right: 14px;
  }
  .special{
    border-top: 8px solid rgb(247,247,247);
  }
</style>